<template>
    <div class="main">
        <div>
            我的历史
        </div>
        <div>
            <div class="card-parent" v-for="item in historyList" :key="item"> 
                <div class="my-detail-recommend-card"> 
                    <div>
                        <el-image :src="agentPicture(item.picture,item.referer)">
                            <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                        </el-image>
                    </div>
                    <div>
                        <div>
                            <span>{{item.title}}</span>
                            <!-- <div>
                                <span>类型: </span><span> 热血{{item}}</span>
                            </div> -->
                        </div>
                        <!-- <div class="my_button">
                            <el-button plain size="small">开始阅读</el-button> 
                            <el-button plain size="small">取消订阅</el-button>
                        </div> -->
                    </div>
                </div>
                <div>
                    观看时间：{{item.createDate}}
                </div>
                <div class="my_button">
                    <el-button plain size="small" @click="deleteOperationControllerDeleteHistoryRecordResource(item.id)">删除记录</el-button> 
                    <el-button plain size="small" @click="routerPushSearch(item.jumpurl,item.spiderId)">继续阅读</el-button>
                </div>
            </div>
        </div>
        <div>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :hide-on-single-page="pagehide"
            :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, prev, pager, next, sizes" :total="this.page.total"> </el-pagination>
        </div>
    </div>
</template>


<script>
import LogoSrc from '@/assets/icon/comic.png'
import Api from '@/api/index';

export default {
  name: 'History',
  data () {
    return {
        logo: LogoSrc,
        base:{
            userId: this.$store.state.common.userId,
            avatar: this.$store.state.common.avatar, 
        },
        //分页参数
        page: {
            index: 1,
            size: 10,
            total: 0,
        },
        //历史记录
        historyList: [],
    }
  },
  computed:{
        // num2不是函数
        pagehide:{
            // 当计算属性要修改时先触发set方法
            // 读取当前计算属性的值，get方法可以隐藏，默认进入的是get方法
            get:function(){
                if(this.page.total <= 0){
                    return true;
                }else{
                    return false;
                }
            },
            // set:function(val){
            //     this.num = val;
            //     console.log('val',val)
            // }
        }
    },
  methods: {
    //图片代理
    agentPicture(url,referer){
        let agentUrl = Api.APIROOT + '/agentController/forwardPicture?url=' + url + '&referer=' + referer
        return agentUrl
    },
    //点击跳转界面
    routerPushSearch(url,pyId){
        let newWindow = this.$router.resolve({path: '/detail/' + pyId,
                        query: {
                                url: url
                                }
        })
        window.open(newWindow.href,'_blank')
    },
    //分页值修改
    handleSizeChange(val) {
        this.page.size=val;
        this.getTableInfo();
    },
    handleCurrentChange(val) {
        //当前为第几页时调用getTabelInfo()显示第几页数据
        this.page.index=val;
        this.currentPage=val;
        this.getTableInfo();
    },
    //获取历史数据
    getTableInfo(){
        //初始化界面,获取登录用户信息
        Api.getMainPageControllerQueryHistoryRecordPageResource(this.page.index, this.page.size, this.base.userId).then(response => {
            if(response.data.code = 200){
                this.historyList = response.data.data.data
                this.page.total = Number(response.data.data.total)              
            }
        })
    },
    //删除历史记录
    deleteOperationControllerDeleteHistoryRecordResource(id) {
        Api.getOperationControllerDeleteHistoryRecordResource(id).then(response => {
               if(response.data.code == 200){
                    this.$router.go(0)
                    this.$notify({
                        title: '提示',
                        message: "删除成功",
                        position: 'bottom-left',
                        type: 'success'
                    });
               }
          },error => {
            //获取搜索内容
            this.$notify({
                  title: '提示',
                  message: '删除失败',
                  position: 'bottom-left',
                  type: 'error'
              });
        })
    }
  },
  mounted() {
    //初始化界面,获取登录用户信息
    Api.getMainPageControllerQueryHistoryRecordPageResource(this.page.index, this.page.size, this.base.userId).then(response => {
          if(response.data.code = 200){
            this.historyList = response.data.data.data
            this.page.total = Number(response.data.data.total)                 
          }
    })
  }
}
</script>

<style scoped>
.main{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start; */
    align-items: flex-start;
}
.el-avatar{
    box-shadow: 0px 0px 5px 1px rgb(223, 223, 223);
}
.main > div:nth-child(1){
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6em;
    margin: 0px 0px 30px 0px;
    font-weight: 1000;
}
.main > div:nth-child(2){
    width: 100%;
}
/** 分页样式 */
.main > div:nth-child(3){    
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/** 卡条样式 */
.card-parent{
    height: 120px;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* align-content: center; */
    justify-content: space-between;
    margin-top: 20px;
}
.card-parent > div:nth-child(2){
    height: min-content;
    margin-top:auto;
    margin-bottom:auto;
    margin-right: 10%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    font-weight: 550;
}
/**卡片样式 */
.my-detail-recommend-card{
    /* margin-top: 16px; */
    width: 261px;
    height: 120px;
    display: flex;
    flex-direction: row;
    /* padding: 4px 0px 4px 0px; */
}
.my-detail-recommend-card > div:first-child .el-image {
    width: 90px;
    height: 120px;
}
.my-detail-recommend-card > div:nth-child(2){
    width: 181px;
    height: 106px;
    margin-left: 12px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}  
/** 按钮样式 */
.my_button{
    width: 25%;
    height: max-content;
    display: flex;
    flex-direction: row;
    margin-top:auto;
    margin-bottom:auto;
}
.my_button > .el-button{
    width: 45%;
}

/** 其他*/
.card-parent:hover{
    background-color: rgb(241, 241, 241);
    /* box-shadow: -2px 2px 2px 2px rgb(235, 235, 235); */
}
.card-parent:active{
    background-color: rgb(241, 241, 241);
    /* box-shadow: -2px 2px 2px 2px rgb(196, 196, 196); */
}
</style>